<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印机分配</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
</head>
<body>
<div id="app">
    激光码查询：<input type="text" placeholder="输入订单编号" v-model="search" @input="offSearch">
    <el-button type="primary" icon="el-icon-search" @click="searchLaserandPrinter">查询</el-button>
    <template>
        <el-radio v-model="radio" label="">全部</el-radio>
        <el-radio v-model="radio" label="1">已打印</el-radio>
        <el-radio v-model="radio" label="-1">待打印</el-radio>
    </template>
    <div style="border: solid 1px darkgrey;line-height: 60px">
        <el-button type="primary" @click=" automaticAllocation ">自动分配
        </el-button>
        <el-button type="success" @click="manualAllocation">手动分配
        </el-button>
        <el-button type="danger" icon="el-icon-delete" @click="lasersDeletes">批量删除</el-button>
    </div>

    <!--表数据-->
    <template>
        <el-table
                :data="laserTableData"
                style="width: 100%"
                :default-sort = "{prop: 'lno', laser: 'descending'}"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             :selectable="disableSelect"
                             width="55">
            </el-table-column>
            <el-table-column
                    prop="lno"
                    label="订单编号"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="lcode"
                    label="激光码"
                    sortable>
            </el-table-column>
            <el-table-column
                    label="打印状态"
                    sortable>
                <template scope="scope">
                    {{scope.row.lstatus == 1 ? '已打印' : '待打印'}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="lprinter"
                    label="打印机"
                    sortable>
            </el-table-column>
        </el-table>
    </template>

    <!--弹出框-->
    <el-dialog
            title="手动分配打印机"
            :visible.sync="dialogFormVisible"
            width="70%">
        <template>
            <el-table
                    :data="printerTableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        label="">
                    <template slot-scope="scope">
                        <el-radio v-model="radio1" :label="scope.row.pnum"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pnum"
                        label="打印机编号">
                </el-table-column>
                <el-table-column
                        prop="pserver"
                        label="服务器">
                </el-table-column>
                <el-table-column
                        prop="pdescribe"
                        label="描述">
                </el-table-column>
                <el-table-column
                        prop="ptype"
                        label="可打型号">
                </el-table-column>
                <el-table-column
                        prop="pip"
                        label="IP地址">
                </el-table-column>
            </el-table>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="startPrinting">开始打印</el-button>
        </div>
    </el-dialog>


    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="loadPage"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                laserTableData: null,//表数据
                total: 0,//总条数
                pageSize: 5,//每条页数
                current: 1,//当前页
                formLabelWidth: '200px', // 表单宽度
                multipleSelection: [],
                search: '', // 搜索订单编号
                radio: '',//单选框值
                searchOn: false, // 搜索开关

                printerTableData: null,//打印机表
                dialogFormVisible: false,//弹出框默认关闭
                radio1:''
            }
        },
        mounted(){
            this.loadPage(1);
        },
        watch: {
            radio: function (o,n) {
                this.loadPage(1);
            }
        },
        methods: {
            //加载当前页.
            loadPage(current) {
                axios.get('/lasers/printer', {
                    params: {
                        current: current,
                        pageSize: this.pageSize,
                        search: this.search,
                        radio: this.radio
                    }
                }).then(value => {
                    if (value.data.code == 1) {
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.laserTableData = value.data.data.records;
                    }
                })
            },
            //数据显示条数
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadPage(1);
            },
            // 根据订单编号和激光码以及状态搜索数据
            searchLaserandPrinter() {
                if (this.search != '') {
                    this.searchOn = true;
                    this.handleSizeChange(this.pageSize);
                }
            },
            // 清除输入框触发，停止搜索
            offSearch() {
                if (this.search == '') {
                    this.searchOn = false;
                    this.handleSizeChange(this.pageSize);
                }
            },
            //选择触发
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log("这是val:")
                console.log(val);
            },
            //批量删除激光码并且修改订单激光码状态
            lasersDeletes() {
                if (this.multipleSelection.length > 0) {
                    var orderids = [];
                    this.multipleSelection.forEach(item => {
                        orderids.push(item.lno)
                    });
                    console.log("这是orderid");
                    console.log(orderids);
                    if (confirm("是否批量删除？")) {
                        axios.post('/lasers/deletes', orderids).then(value => {
                            this.$message({
                                message: '批量删除成功',
                                type: 'success'
                            })
                            this.loadPage(this.current);
                        });
                    }
                } else {
                    this.$message({
                        message: '请先选择要删除选项',
                        type: 'warning'
                    })
                }
            },
            //手动分配
            manualAllocation(){
                if (this.multipleSelection.length > 0) {
                    this.dialogFormVisible=true;
                    axios.get('/tolaserprinters').then(value => {
                        if (value.data.code == 1) {
                            this.printerTableData = value.data.data;
                        }
                    })
                }else {
                    this.$message({
                        message: '请先选择要打印订单',
                        type: 'warning'
                    })
                }
            },

            //自动分配
            automaticAllocation(){
                if (this.multipleSelection.length > 0) {
                    var orderids = [];
                    this.multipleSelection.forEach(item => {
                        orderids.push(item.lno)
                    });

                    axios.post('/lasers/updates',{
                        orderids,
                    }).then(value => {
                        this.loadPage(1);
                    });
                }else {
                    this.$message({
                        message: '请先选择要打印订单',
                        type: 'warning'
                    })
                }
            },

            //确认打印
            startPrinting(){
                if (this.radio1 == '') {
                    this.$message({
                        type: 'warning',
                        message: '请选择打印机'
                    });
                    return;
                }
                var orderids = [];
                this.multipleSelection.forEach(item => {
                    orderids.push(item.lno)
                });

                axios.post('/lasers/updates',{
                    orderids,
                    pnum: this.radio1
                }).then(value => {
                    this.loadPage(1);
                    this.dialogFormVisible=false;
                });
            },

            // 判断是否打印并禁用
            disableSelect(row,index) {
                if (row.lstatus == 1) {
                    return false;
                }
                return true;
            }
        }
    })
</script>
</html>